<%--
  Created by IntelliJ IDEA.
  User: 陈帅玺
  Date: 2019-01-10
  Time: 16:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
</head>
    <c:set var="path" value="${pageContext.request.contextPath}"></c:set>
    <link rel="stylesheet" href="/assets/css/loader-style.css">
    <link rel="stylesheet" href="/assets/css/bootstrap.css">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/js/jquery-3.3.1.js"></script>
    <script src="/layui/layui.js"></script>
<style>
    #add {
        display: none;
        padding: 30px 50px 0 50px;
    }
</style>
<body>
<div id="add">
    <form class="layui-form" id="addform">
        <input type="hidden" name="id" id="bianhao">
        <div class="layui-form-item">
            <label class="layui-form-label">产品名称:</label>
            <div class="layui-input-inline">
                <input type="text" style="width: 350px;" name="name" id="name" class="layui-input" autocomplete="off">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属仓库:</label>
            <div class="layui-inline"  style="width: 350px;">
                <select id="storeid" name="storeid">
                    <option value="-1">请选择</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">单位:</label>
            <div class="layui-input-inline">
                <input type="text" style="width: 350px;" name="unit" id="unit" class="layui-input" autocomplete="off">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">价格:</label>
            <div class="layui-input-inline">
                <input type="text" style="width: 350px;" name="price" id="price" class="layui-input" autocomplete="off">
            </div>
        </div>
        <%--<div class="layui-form-item">--%>
            <%--<label class="layui-form-label">总数量:</label>--%>
            <%--<div class="layui-input-inline">--%>
                <%--<input type="text" style="width: 350px;" name="totalnum" id="totalnum" class="layui-input" autocomplete="off">--%>
            <%--</div>--%>
        <%--</div>--%>
        <div class="layui-form-item">
            <label class="layui-form-label">备注:</label>
            <div class="layui-input-inline">
                <input type="text" style="width: 350px;" name="remark" id="remark" class="layui-input" autocomplete="off">
            </div>
        </div>
    </form>
</div>
    <h2>产品列表</h2>
    <hr>
    <form class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">产品:</label>
                <div class="layui-inline">
                    <input type="text" id="chanpin" class="layui-input" autocomplete="off">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">所属仓库:</label>
                <div class="layui-inline">
                    <select id="storeids" name="storeid" class="layui-select">
                        <option value="-1">请选择</option>
                    </select>
                </div>
            </div>
            <button type="button" class="layui-btn btn-group" style="margin-bottom: 10px" onclick="searchData()">查询</button>
        </div>
    </form>

    <table class="layui-table" lay-data="{url:'${path}/Shopping/list',page:true, id:'userTable',toolbar:'#toolbarDemo',defaultToolbar: ['filter', 'print', 'exports'],even: true}" lay-filter="userTable">
        <thead>
            <tr>
                <th lay-data="{field:'id', width:80}">编号</th>
                <th lay-data="{field:'name', width:180}">名称</th>
                <th lay-data="{field:'price'}">价格</th>
                <th lay-data="{field:'unit'}">单位</th>
                <th lay-data="{templet:'#store'}">所属仓库</th>
                <th lay-data="{field:'remark'}">备注</th>
                <th lay-data="{toolbar:'#barDemo'}">操作</th>
            </tr>
        </thead>
    </table>
</body>
</html>
<script>
    $.get("${path}/Shopping/search",function (data) {
        $.each(data,function () {
            var opt=$("<option></option>").appendTo("#storeid");
            opt.text(this.storename).val(this.id);
        })
    })
    $.get("${path}/Shopping/search",function (data) {
        $.each(data,function () {
            var opt=$("<option></option>").appendTo("#storeids");
            opt.text(this.storename).val(this.id);
        })
    })
    //表格渲染
    var table;
    layui.use(['table','form'], function () {
        layui.form.render();
        table = layui.table;
        var form = layui.form;
        //增加
        table.on('toolbar(userTable)',function (obj) {
            var e = obj.event;
            var data=obj.data;
            switch (e) {
                case"add":
                    layer.open({
                        type: 1,
                        title: "产品增加",
                        skin: "layui-layer-molv",
                        anim: 0,
                        offset:"260px;",
                        area: "700px",
                        content: $("#add"),
                        btn: ['确定','取消'],
                        yes : function (index) {
                            var str = $("#addform").serialize();
                            $.post("${path}/Shopping/add",str,function (){
                                layer.close(index);
                                table.reload('userTable');
                            });
                        }
                    })
                    break;
            }
        })
        //右侧
        table.on('tool(userTable)',function (obj) {
            var e = obj.event;
            var data=obj.data;
            switch (e) {
                case"update":
                    layer.open({
                        type: 1,
                        title: "产品增加",
                        skin: "layui-layer-molv",
                        anim: 0,
                        offset:"260px;",
                        area: "700px",
                        content: $("#add"),
                        btn: ['确定','取消'],
                        success:function(){
                            layui.form.val("serviceForm",addform);
                            $("#bianhao").val(data.id)
                            $("#name").val(data.name);
                            $("#price").val(data.price);
                            $("#unit").val(data.unit);
                            $("#totalnum").val(data.totalnum);
                            $("#remark").val(data.remark);
                            $("#storeid").val(data.crmStore.id);
                            layui.form.render();
                            // alert(data.crmStore.id)
                            console.log(data)
                        },
                        yes : function (index) {
                            var str = $("#addform").serialize();
                            $.post("${path}/Shopping/update",str,function (){
                                layer.msg("修改成功....")
                                layer.close(index);
                                table.reload('userTable');
                            });
                        }
                    })
                    break;
                case "del":
                    layer.open({
                        time:0,
                        title:'友情提示',
                        offset:"280px",
                        content:'确定要删除此行数据吗？',
                        shade:[0.3,'#000'],
                        btn:['确定','取消'],
                        yes:function () {
                            $.post("${path}/Shopping/del",{id:data.id},function () {
                                layer.msg('删除成功...',{time:1200,offset: '260px'});
                                table.reload('userTable');
                            })
                        }
                    })
                    break;
            }
        })
    })
    function searchData() {
        layui.table.reload("userTable",{
            page:{
                curr : 1
            },
            where:{
                "name":$("#chanpin").val(),
                "storeid" : $("#storeids").val()
            }
        });
    }
</script>
<script type="text/html" id="store">
    {{d.crmStore.storename}}
</script>
<!--增加-->
<script type="text/html" id="toolbarDemo">
    <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-circle"></i>添加产品</button>
</script>
<!--  修改、删除  -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs " lay-event="update" title="修改"><span class="layui-icon layui-icon-edit"></span></a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" title="删除"><span class="layui-icon layui-icon-delete"></span></a>
</script>